﻿<template>
    <div class="StockWireropeKeepDetail">
        <MyDialog :model-value="true" :type="DialogType.C2" :title="title" @close="onClose">
            <el-form ref="StockWireropeKeepDetailFormRef" label-width="100" :model="thisData" :rules="rules">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="钢丝绳编码" prop="stockModel.code">
                            <el-input v-model="thisData.stockModel.code" maxlength="200" disabled>
                                <template #append v-if="rowAutoID == null">
                                    <el-button @click="onOpenStockSelect">
                                        <el-icon>
                                            <Search />
                                        </el-icon>
                                    </el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="钢丝绳名称">
                            <el-input v-model="thisData.stockModel.name" maxlength="200" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="规格型号">
                            <el-input v-model="thisData.stockModel.guiGe" maxlength="200" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="直径">
                            <el-input v-model="thisData.stockModel.diameter" maxlength="200" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="长度">
                            <el-input v-model="thisData.stockModel.lengthNum" maxlength="200" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="绳子条数">
                            <el-input v-model="thisData.stockModel.cnt" maxlength="200" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="供应商">
                            <el-input v-model="thisData.stockModel.supplierName" maxlength="200" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="制造商">
                            <el-input v-model="thisData.stockModel.producerName" maxlength="200" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="维保周期">
                            <el-input v-model="thisData.stockModel.keepDay" maxlength="200" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="入库日期">
                            <el-date-picker v-if="rowAutoID != null" class="w-100" v-model="thisData.billModel.confirmDate" type="date" disabled />
                            <el-date-picker v-else class="w-100" v-model="thisData.stockModel.billConfirmDate" type="date" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>

                <div class="rowTitle marb-10 mart-10">维保信息</div>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="实施单位" prop="companyName">
                            <el-input v-model="thisData.companyName" maxlength="200" :disabled="isSee"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="实施人员" prop="userName">
                            <el-input v-model="thisData.userName" maxlength="50" :disabled="isSee"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="实施日期" prop="doDate">
                            <el-date-picker class="w-100" v-model="thisData.doDate" type="date" :disabled="isSee" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="实施备注" prop="remark">
                            <el-input v-model="thisData.remark" maxlength="500" :disabled="isSee"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="照片" prop="pic_Imgs">
                            <MyUpload v-model="thisData.pic_ImgsList" onlyImg :disabled="thisData.status == Enums.StockWireropeKeep_Status.已维保 || isSee"></MyUpload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="附件" prop="attr_Imgs">
                            <MyUpload v-model="thisData.attr_ImgsList" :disabled="thisData.status == Enums.StockWireropeKeep_Status.已维保 || isSee"></MyUpload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <template #footer>
                <el-button type="primary" :loading="loading" @click="onSave" v-if="!isSee">保存</el-button>
            </template>
        </MyDialog>

        <StockSelect v-if="isShowStockSelect" :hasCheckbox="false" :hasRadio="true" @close="onCloseStockSelect" :defaultFilter="{ _IsOut: false }"></StockSelect>
    </div>
</template>

<script lang="ts" setup>
import Enums from "@/gx/Enums";
import Gx from "@/gx/Gx";
import { FormRules } from "element-plus";
import { DialogType } from "@/_gx/TsEnums";
import StockSelect from "@/views/wb/Stock/StockSelect.vue";

//接收父组件的传值
const rowAutoID = inject("rowAutoID") as Ref<number | null>;

//定义当前页面数据对象
const thisData = ref<any>({ stockModel: {}, billModel: {}, doDate: Gx.GetDate() });

//loading...
const loading = ref(false);

const isSee = ref(false);

//定义表单验证规则
const rules = ref<FormRules>({
    "stockModel.code": [{ required: true, message: "请选择钢丝绳", trigger: "blur" }],
    doDate: [{ required: true, message: "请选择实施日期", trigger: "change" }],
});

//标题
const title = computed(() => {
    if (Gx.IsEmpty(rowAutoID.value)) {
        return "备绳维保详情 - 创建";
    } else {
        return `备绳维保详情 - ${isSee.value == true ? "查看" : "编辑"} - ${thisData.value.companyName}`;
    }
});

//初始化
const Init = (_isSee: boolean = false) => {
    isSee.value = _isSee;
    if (!Gx.IsEmpty(rowAutoID.value)) {
        App.CallApi(Api.StockWireropeKeep.GetByID(rowAutoID.value), {
            success: (res) => {
                thisData.value = res;
            },
        });
    } else {
        thisData.value.pic_ImgsList = [];
        thisData.value.attr_ImgsList = [];
    }
};

//表单Ref对象
const StockWireropeKeepDetailFormRef = ref(null);

//保存
const onSave = () => {
    StockWireropeKeepDetailFormRef.value.validate((isOk: boolean) => {
        if (!isOk) {
            return;
        }

        let _api = null;
        let _data = thisData.value;
        if (Gx.IsEmpty(rowAutoID.value)) {
            //添加
            _api = Api.StockWireropeKeep.Insert;
        } else {
            //修改
            _api = Api.StockWireropeKeep.Update;
        }

        loading.value = true;
        App.CallApi(_api, {
            data: _data,
            success: (res) => {
                emits("close", true);
            },
            complete: () => {
                loading.value = false;
            },
        });
    });
};

//关闭
const onClose = () => {
    emits("close", false);
};

let isShowStockSelect = ref(false);
//打开钢丝绳选择
const onOpenStockSelect = () => {
    if (!isSee.value) {
        isShowStockSelect.value = true;
    }
};

//关闭钢丝绳选择
const onCloseStockSelect = (selectData) => {
    isShowStockSelect.value = false;
    if (!Gx.IsEmpty(selectData)) {
        thisData.value.stockID = selectData.stockID;
        thisData.value.stockModel.stockID = selectData.stockID;
        thisData.value.stockModel.code = selectData.code;
        thisData.value.stockModel.name = selectData.name;
        thisData.value.stockModel.guiGe = selectData.guiGe;
        thisData.value.stockModel.diameter = selectData.diameter;
        thisData.value.stockModel.nianJu = selectData.nianJu;
        thisData.value.stockModel.lengthNum = selectData.lengthNum;
        thisData.value.stockModel.cnt = selectData.cnt;
        thisData.value.stockModel.mpaID = selectData.mpaID;
        thisData.value.stockModel.mpaName = selectData.mpaName;
        thisData.value.stockModel.surfaceStatusID = selectData.surfaceStatusID;
        thisData.value.stockModel.surfaceStatusName = selectData.surfaceStatusName;
        thisData.value.stockModel.twistingTypeID = selectData.twistingTypeID;
        thisData.value.stockModel.twistingTypeName = selectData.twistingTypeName;
        thisData.value.stockModel.departmentID = selectData.departmentID;
        thisData.value.stockModel.keepDay = selectData.keepDay;
        thisData.value.stockModel.hoisterID = selectData.hoisterID;
        thisData.value.stockModel.hoisterName = selectData.hoisterName;
        thisData.value.stockModel.hoisterUsageID = selectData.hoisterUsageID;
        thisData.value.stockModel.hoisterUsageName = selectData.hoisterUsageName;
        thisData.value.stockModel.wireropeTypeID = selectData.wireropeTypeID;
        thisData.value.stockModel.wireropeTypeName = selectData.wireropeTypeName;
        thisData.value.stockModel.supplierID = selectData.supplierID;
        thisData.value.stockModel.supplierName = selectData.supplierName;
        thisData.value.stockModel.producerID = selectData.producerID;
        thisData.value.stockModel.producerName = selectData.producerName;
        thisData.value.stockModel.billConfirmDate = selectData.billModel[0].confirmDate;
    }
};

//向上抛出的事件与方法
const emits = defineEmits(["close"]);
defineExpose({ Init });
</script>
